<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义控制面板</title>
		<script src='js/jquery3.5.1.min.js'></script>
	</head>
	<body>
		
		<audio src='./music/jn.mp3' controls='controls'>
			<!-- controls属性显示音频标签控制面板 -->
		</audio>
		<h1>自定义控制面板</h1>
		<div class='control'>
			<button id='provMusic'>上一首</button>
			<button id='playAndPause'>上一首</button>
			<button id='nextMusic'>上一首</button>
            <span id='currentTime'>0:00</span>
			<input type='range' id='playProgress' min='0'max='200'value='0'style='width: 18.75rem;'>
            <span id='totalTime'>0:00</span>		
			<button id='volButton'>静音/正常音量</button>
			<input type='range' id='volProgress'min='0'max='1'step='0.1'>
			<button id='playMode' title='顺序播放'>播放模式</button>
		
		</div>
</html>
<script type='text/javascript'>
	   //获取音频标签的长度
	     var myAudio=$('audio').get(0);//转换成原生
		//  var totalTime=myAudio.duration;//获取当前引入歌曲的长度
		// //  var m;
		// //  console.log($('audio'));
		// //  console.log(m);
		// //  console.log(totalTime);
  // //       var myAudio = $('audio').get(0);//原生DOM
  // //       var totalTime = myAudio.load();
		// // //找到结构了，为什么会是nan
		var totalTime;
		var a=0;
		  myAudio.oncanplay = function() {
		        console.log(myAudio.duration);
				totalTime=myAudio.duration;
				a=10;
				$('#playProgress').attr('max',totalTime);
				totalTime=parseInt(totalTime/60)+':'+parseInt(totalTime%60);
				$('#totalTime').text(totalTime);
				console.log(totalTime,a);
				
            }
		// function long(){
  //           totalTime=myAudio.duration;
		// }
		// setTimeout(long,100);
		 $('#playAndPause').on('click',function(){
			 if(myAudio.paused){//paused值为真时，表示暂停状态，为假时表示播放状态
				 myAudio.play();//播放当前音频文件
				 $(this).text('暂停');
			 }else{
				 myAudio.pause();//暂停播放当前文件
				 $(this).text('播放')
			 }
		 })
		 myAudio.ontimeupdate=function(){
			 console.log(this.currentTime);
			 $('#playProgress').val(this.currentTime);
			 var time=parseInt(this.currentTime);
			 time=(parseInt(time/60)>0?parseInt(time/60):'0')+":"+(parseInt(time%60)<10?'0'+parseInt(time%60):parseInt(time%60));
			
			 console.log(time);
			 $('#currentTime').text(time);
		 }
	   
</script>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  